<template>
  <div class="app-container">
    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>维修进度</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-steps :active="[0,1,2,3][repair.repairStatus]" align-center>
          <el-step title="待分配"></el-step>
          <el-step title="待处理"></el-step>
          <el-step title="已完成"></el-step>
          <el-step title="已评价"></el-step>
        </el-steps>
      </el-col>
    </el-row>

    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>报修信息</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          报修人：
          <div class="list-item-txt">{{ repair.name }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          维修单号：
          <div class="list-item-txt">{{ repair.repairCode }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          状态：
          <div class="list-item-txt">
            <dict-tag :options="dict.type.repair_status" :value="repair.repairStatus"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          联系方式：
          <div class="list-item-txt">{{ repair.mobile }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          公司：
          <div class="list-item-txt">{{ repair.crmCustomer?repair.crmCustomer.companyName:'' }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          地址：
          <div class="list-item-txt">{{ repair.address }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          报修时间：
          <div class="list-item-txt">{{ repair.createTime }}</div>
        </div>
      </el-col>
    </el-row>

    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>维修信息</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          维修员：
          <div class="list-item-txt">{{ repair.sysUser?repair.sysUser.nickName:'' }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          联系电话：
          <div class="list-item-txt">{{ repair.sysUser?repair.sysUser.phonenumber:'' }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          维修费用：
          <div class="list-item-txt">{{ repair.repairFee }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          开始时间：
          <div class="list-item-txt">{{ repair.repairStartTime }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          结束时间：
          <div class="list-item-txt">{{ repair.repairEndTime }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          维修材料：
          <div class="list-item-txt">{{ repair.material }}</div>
        </div>
      </el-col>
    </el-row>

    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>评价</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          评价结果：
          <el-rate
            v-model="repair.commentRepair"
            disabled
            text-color="#ff9900">
          </el-rate>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          评价工人：
          <el-rate
            v-model="repair.commentMember"
            disabled
            text-color="#ff9900">
          </el-rate>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="list-item">
          意见建议：
          <div class="list-item-txt">{{ repair.repairSuggest }}</div>
        </div>
      </el-col>
    </el-row>

    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>维修日志</span>
        </div>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="repairsrecordList">
      <el-table-column label="序号" align="center" prop="id"/>
      <el-table-column label="操作时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="维修状态" align="center" prop="repairStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.repair_status" :value="scope.row.repairStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="记录" align="center" prop="remark"/>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<style>
  .el-steps--horizontal {
    width: 120%;
    margin-left: -10%;
  }

  .el-step__head.is-success {
    color: #009FFF;
  }

  .el-step__icon.is-text {
    width: 10px;
    height: 10px;
    overflow: hidden;
    top: 2px;
  }

  .el-step__head.is-finish .el-step__icon.is-text {
    background: #1890FF;
  }

  .el-step__head.is-process .el-step__icon.is-text {
    background: #303133;
  }

  .el-step__head.is-wait .el-step__icon.is-text {
    background: #C0C4CC;
  }
</style>
<script>
  import {getRepairs} from "@/api/repairs/repairs";
  import {listRepairsrecord} from "@/api/repairs/repairsrecord";

  export default {
    name: "Repairsrecord",
    dicts: ['repair_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        repair: {},

        // 维修记录表格数据
        repairsrecordList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          repairId: this.$route.query.id
        },

        value: 3.5
      };
    },
    created() {
      this.getList();
      this.getRecord();
    },
    methods: {
      getList() {
        getRepairs(this.$route.query.id).then(response => {
          this.repair = response.data;
        });
      },
      /** 查询维修记录列表 */
      getRecord() {
        this.loading = true;
        listRepairsrecord(this.queryParams).then(response => {
          this.repairsrecordList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    }
  };
</script>

